<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />
    <link rel="preload" href="/node_modules/@perspective-dev/viewer/dist/wasm/perspective-viewer.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" />
    <link rel="preload" href="/node_modules/@perspective-dev/server/dist/wasm/perspective-server.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" />
    <link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@perspective-dev/viewer/dist/css/themes.css" />
    <link rel='stylesheet' href="index.css">
</head>
<body>
    <div id="app">
        <div id="controls">
            <button id="run" disabled>Run</button>
            <div class="range xl">
                <input id="xmin" min="-2" max="1.0" step="0.1" value="-0.4" type="range"></input>
                <input id="xmax" min="-2" max="1.0" step="0.1" value="-0.3" type="range"></input>
            </div>
            <div class="range right">
                <span>Resolution</span>
                <input id="resolution" min="25" max="700" type="number" placeholder="Resolution" value="200"></input>
            </div>
            <div class="range right">
                <span>Iterations</span>
                <input id="iterations" min="1" max="1000" type="number" placeholder="Iterations" value="100"></input>
            </div>
        </div>
        <div id="controls2">
            <div class="range xl">
                <input id="ymin" min="-1" max="1.0" step="0.1" value="0.6" type="range" orient="vertical"></input>
                <input id="ymax" min="-1" max="1.0" step="0.1" value="0.7" type="range" orient="vertical"></input>
            </div>
        </div>
        <perspective-viewer id="viewer"></perspective-viewer>
    </div>
    <script type="module" src="index.js"></script>
</body>
</html>